<template>
  <div v-if="!isListVisible">
    <!-- 联络结果查询 -->
    <div class="message">
      <el-radio></el-radio>联络结果查询
    </div>
    <el-form ref="vForm" :model="state.dataForm" @keyup.enter="state.getDataList()" label-width="85px">
      <el-form-item label="联络任务" style="margin-left: 30px;">
        <el-checkbox @change="handleCheckAllChange">全选</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-checkbox-group class="select" v-model="state.tskIdArr">
          <el-checkbox v-for="item in taskleader" :key="item.id" :label="item.id" :value="item.id">
            {{ item.tskName }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-row style="margin-left: 30px;">
        <el-form-item label="操作人员">
          <el-select v-model="state.dataForm.sftId" placeholder="请选择">
            <el-option v-for="item in operatorList" :key="item.userId" :label="item.realName" :value="item.userId">
              {{ item.realName }}
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row style="margin-left: 30px;">
        <el-form-item label="联络结果">
          <ren-select v-model="state.dataForm.linkResult" dict-type="contact-results" placeholder="请选择"></ren-select>
        </el-form-item>
      </el-row>
      <!-- 已联络 -->
      <div v-if="state.dataForm.linkResult == 'telephone_contacted'">
        <el-row style="margin-left: 30px;">
          <el-form-item>
            <ren-checkbox-group v-model="state.dataForm.linkResult" dict-type="telephone_contacted"
              placeholder="请选择"></ren-checkbox-group>
          </el-form-item>
        </el-row>
      </div>
      <!-- 未联络 -->
      <div v-if="state.dataForm.linkResult == '未联络'">
        <el-row style="margin-left: 30px;">
          <el-form-item>
            <ren-checkbox-group v-model="state.dataForm.linkResult" placeholder="请选择"></ren-checkbox-group>
          </el-form-item>
        </el-row>
      </div>
      <!-- 待联络 -->
      <div v-if="state.dataForm.linkResult == 'wait_contact'">
        <el-row style="margin-left: 30px;">
          <el-form-item>
            <ren-checkbox-group v-model="state.dataForm.linkResult" dict-type="wait_contact"
              placeholder="请选择"></ren-checkbox-group>
          </el-form-item>
        </el-row>
      </div>
      <!-- 不联络 -->
      <div v-if="state.dataForm.linkResult == 'no_contact'">
        <el-row style="margin-left: 30px;">
          <el-form-item>
            <ren-checkbox-group v-model="state.dataForm.linkResult" dict-type="no_contact"
              placeholder="请选择"></ren-checkbox-group>
          </el-form-item>
        </el-row>
      </div>
      <!-- 失败 -->
      <div v-if="state.dataForm.linkResult == 'telephone_fail'">
        <el-row style="margin-left: 30px;">
          <el-form-item>
            <ren-checkbox-group v-model="state.dataForm.linkResult" dict-type="telephone_fail"
              placeholder="请选择"></ren-checkbox-group>
          </el-form-item>
        </el-row>
      </div>
      <el-row style="margin-left: 30px;">
          <el-form-item label="联络时间">
            <el-date-picker v-model="state.daterange" type="daterange" value-format="YYYY-MM-DD" :range-separator="$t('datePicker.range')" :start-placeholder="$t('datePicker.start')" :end-placeholder="$t('datePicker.end')"> </el-date-picker>
          </el-form-item>
      </el-row>
      <el-row style="margin-left: 30px;">
        <el-form-item label="联络时长">
          <el-input v-model="state.dataForm.linkMinTime" type="text" placeholder="请输入"></el-input>
        </el-form-item>
        <el-text style="font-size:16px;margin-top:-30px;padding: 10px 10px "> __</el-text>
        <el-form-item label-width="0px">
          <el-input v-model="state.dataForm.linkMaxTime" type="text" placeholder="请输入"></el-input>
        </el-form-item>
        <el-text style="font-size:16px;margin-top:-20px;padding: 10px 10px ">秒</el-text>
      </el-row>
      <el-row style="margin-left: 30px;">
        <el-col>
          <el-form-item>
            <el-checkbox v-model="state.dataForm.dataBox" label="人员数据筐" name="type"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-left: 30px;margin-top: 30px;">
        <el-col>
          <el-form-item>
            <el-button type="primary" @click="baseQuery()" :disabled="state.tskIdArr.length === 0">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <!-- 查询列表  -->
  <div v-if="isListVisible" style="margin: 0;background:#fff">
    <el-form label-position="left" label-width="14px" :inline="true" :model="state.dataForm"
      @keyup.enter="state.getDataList()">
      <div style="font-size: 16px;">
        <el-radio></el-radio>联络结果查询列表
      </div>
      <el-form-item style="margin-top: 10px;">
        <el-button type="primary" @click="redistribution()">重新分配任务</el-button>
      </el-form-item>
      <el-form-item style="margin-top: 10px;">
        <el-button type="primary" @click="toggleListVisibility()">返回</el-button>
      </el-form-item>
      <div v-if="isredistribution">
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-checkbox @change="handleCheckAllChange2">全选</el-checkbox>
            </el-form-item>
          </el-col>
          <el-form-item>
            <el-checkbox-group v-model="state.stufIdArr" style="margin-top:-20px;">
              <el-checkbox style="width: 10%;" v-for="leader in tskWork" :key="leader.userId" :label="leader.userId"
                :value="leader.userId">{{ leader.realName }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item style="margin-top: 10px;">
            <el-button type="primary" @click="determine()">确定</el-button>
          </el-form-item>
        </el-row>
      </div>
    </el-form>
    <div style="margin-left: 12px">
      <el-checkbox v-model="state.dataForm.selectAll">全选</el-checkbox>
    </div>
    <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
    v-loading="state.dataListLoading" :data="state.dataList"  border @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column type="selection"></el-table-column>
      <el-table-column align="center" prop="lrdLinkState" label="联络状态" width="90"></el-table-column>
      <el-table-column align="center" prop="linkResult" label="联络结果" width="110"></el-table-column>
      <el-table-column align="center" prop="personName" label="姓名" width="100"></el-table-column>
      <el-table-column align="center" prop="company" label="公司名称" width="200"></el-table-column>
      <el-table-column align="center" prop="mobile" label="联络号码" width="120"></el-table-column>
      <el-table-column align="center" prop="thyResult" label="联络历史" width="180"></el-table-column>
      <el-table-column align="center" prop="thyRecordFile" label="通话录音">
      <template v-slot="scope">
        <div v-if="scope.row.thyRecordFile==null||scope.row.thyRecordFile==''"></div>
        <audio v-else :src="scope.row.thyRecordFile" type="audio/mpeg" controls class="video"></audio>
      </template>
    </el-table-column>
      <el-table-column align="center" prop="thyTimeSpan" label="通话时长" width="90"></el-table-column>
      <el-table-column align="center" prop="lrdPlanTime" label="计划联络时间" width="180"></el-table-column>
      <el-table-column align="center" prop="lrdRemark" label="备注" width="80"></el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="100">
        <template v-slot="scope">
          <el-button v-if="state.hasPermission('crm:crmlinkrecord:delete')" link type="danger"
            @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
      :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle"> </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs,watch } from "vue";
import { ElMessage } from "element-plus";
import baseService from "@/service/baseService";
const view = reactive({
  getDataListURL: '/crm/crmlinkrecord/page',
  getDataListIsPage: true,
  daterange: null,
  dataForm: {
    linkBTime: null as number | null,//开始时间
    linkETime: null as number | null,//结束时间
    id: "",
    sftId: "",
    linkResult: "",//联络结果
    linkMinTime: "",//联络时长
    linkMaxTime: "",//联络时长大
    tskIdList: "",
    stufIdListStr: "",
    lrdIdListStr: "",
    // tskStufsList: [] as string[],
    dataBox: "",
    selectAll: false as any,
  },
  tskIdArr: [] as any[],
  stufIdArr: [] as any[],
});

const isListVisible = ref(false);
//重新分配隐藏
const isredistribution = ref(false);

//初始化
const init = () => {
  getTaskWork();
  getresultleader();
  getoperatorList()

};

//返回上一页
const toggleListVisibility = () => {
  isListVisible.value = !isListVisible.value;
  getresultleader()

};


/**
 * 查询按钮
 */
const baseQuery = () => {
  isListVisible.value = !isListVisible.value;
  // 联络任务获取id
  state.dataForm.tskIdList = state.tskIdArr ? state.tskIdArr.join(",") : '';
  // 重新获取数据列表
  state.getDataList();
};

/**
 * 确定按钮
 */
const handleSelectionChange = (val: any) => {
  state.dataForm.lrdIdListStr = val.map((item: { id: any; }) => item.id).join(',');
  console.log(state.dataForm.lrdIdListStr,7777);
  
}
const determine = () => {
  //工作人员获取id
  state.dataForm.stufIdListStr = state.stufIdArr ? state.stufIdArr.join(",") : '';
  baseService.put("/crm/crmlinkrecord/reallocate", {
    selectAll:state.dataForm.selectAll,
    stufIdListStr: state.dataForm.stufIdListStr,
    lrdIdListStr: state.dataForm.lrdIdListStr,
    paramsMap:state.dataForm
  }).then((res) => {
    if (res.code == 0) {
      isredistribution.value = false;
      // 重新获取数据列表
      state.getDataList();
      return ElMessage.success("分配成功");
    }
  });
}

/**
* 重新分配显示隐藏
*
*/
const redistribution = () => {
  isredistribution.value = !isredistribution.value;
}

//工作人员
const tskWork = ref([] as any[]);

/**
 * 工作人员-全选
 * @param val
 */
const handleCheckAllChange2 = (val: boolean) => {
  // 选中
  if (val) {
    for (let i = 0; i < tskWork.value.length; i++) {
      state.stufIdArr.push(tskWork.value[i].userId);
    }
  } else {
    state.stufIdArr = [];
  }
}

/**
 * 获取工作人员
 */
const getTaskWork = () => {
  // 4：工作人员
  return baseService.get("/sys/user/usersByType/4").then((res) => {
    if (res.code !== 0) {
      return ElMessage.error(res.msg);
    }
    tskWork.value = res.data;
  });
};


const taskleader = ref([] as any[]);
/**
 * 联络结果-全选
 * @param val
 */
const handleCheckAllChange = (val: boolean) => {
  // 选中
  if (val) {
    for (let i = 0; i < taskleader.value.length; i++) {
      state.tskIdArr.push(taskleader.value[i].id);
    }
  } else {
    state.tskIdArr = [];
  }
}

/**
 * 获取联络结果
 */
const getresultleader = () => {
  return baseService.get("/crm/crmtask/list").then((res) => {
    if (res.code !== 0) {
      return ElMessage.error(res.msg);
    }
    taskleader.value = res.data;
    console.log(taskleader.value)
  });
};

/**
 *操作人员列表
 */
const operatorList = ref<any[]>([]);
const getoperatorList = () => {
  return baseService.get("/sys/user/usersByType/4").then((res) => {
    operatorList.value = res.data;
  });
};


const state = reactive({ ...useView(view), ...toRefs(view) });

watch(
  () => state.daterange,
  (val: number[] | null) => {
    if (val === null) {
      state.dataForm.linkBTime = null;
      state.dataForm.linkETime = null;
    } else {
      state.dataForm.linkBTime = val[0];
      state.dataForm.linkETime = val[1];
    }
  }
);

//页面进入执行
init();

</script>

<style lang="scss" scoped>
.select {
  width: 800px;
  margin-top: -15px;
  margin-left: 30px;
}

.message {
  font-size: 16px;
  font-weight: 600;
}

::v-deep .video {
  width: 240px;
  height: 25px;
}

.el-form-item::v-deep {
  .el-checkbox-group {
    .el-checkbox {
      width: 150px;
    }
  }
}
</style>
